<template>
  <div class="number">
    <div v-if="s1">
      <!-- 背景块 -->
      <span v-for="item in this.how" :class="'bg s_n'"></span>
      <!-- 显示块 -->
      <span v-for="(item,index) in data" :class="'bg s_' + item" :key="index"></span>
    </div>

    <!-- 最大分数 -->
    <div v-if="s2">
      <span v-for="item in this.maxHow" :class="'bg s_n'"></span>
      <span v-for="(item,index) in maxScore" :class="'bg s_' + item" :key="index"></span>
    </div>

    <!-- 消除的行数 -->
    <div v-if="s3">
      <span v-for="item in this.rmRow" :class="'bg s_n'"></span>
      <span v-for="(item,index) in rmRowSum" :class="'bg s_' + item" :key="index"></span>
    </div>

    <!-- 显示下一个砖块 -->
    <div v-if="s4">
      <div class="back_number" id="back">
        <p>
          <b></b>
          <b></b>
          <b></b>
          <b></b>
        </p>
        <p>
          <b></b>
          <b></b>
          <b></b>
          <b></b>
        </p>
      </div>
    </div>

    <!-- 显示状态 -->
    <div v-if="s5">
      <div id="music" class="bg music"></div>
      <div id="pause" class="bg pause"></div>
      <div class="nowTime">
        <span v-for="(item,index) in this.hour" :class="'bg s_' + item" :key="index"></span>
      </div>
    </div>

  </div>
</template>

<script scr="./index.js">
import { mapState } from 'vuex';

export default {
  props: ['s1', 's2', 's3', 's4', 's5'],
  data() {
    return {
      how: ['0', '0', '0', '0', '0'],
      maxHow: ['0', '0', '0', '0', '0'],
      rmRow: ['0', '0', '0', '0', '0'],
      maxScore: ['0'],
      // 定时器
      t1: {},
      t2: {},
      hour: []
    };
  },
  methods: {
    maxAcount() {
      // 存入，否则创建一个0
      if (localStorage.getItem('maxScore')) {
        // 切割成数组显示分数
        this.maxScore = localStorage.getItem('maxScore').split('');
        this.maxHow.splice(0, this.maxScore.length - 1);
        // console.log(this.maxScore);
      } else {
        localStorage.setItem('maxScore', 0);
      }
    },
    createNextModel(val) {
      if (this.s4) {

        // 获取所有背景块
        let divEle = document.querySelectorAll('.back_number b');
        // console.log(divEle);

        // 清除所有的显示块
        for (let i = 0; i < 8; i++) {
          divEle[i].className = '';
        }

        // console.log(val);
        // console.log(JSON.stringify(val));

        // 背景块变成显示块（不会写只能用屎·方法了）
        for (let key in val) {
          // console.log(val[key]);
          if (val[key].row == 1) {
            if (val[key].col == 1) {
              divEle[0].className = 'fixed_model_num';
            }
            else if (val[key].col == 2) {
              divEle[1].className = 'fixed_model_num';
            }
            else if (val[key].col == 3) {
              divEle[2].className = 'fixed_model_num';
            }
            else if (val[key].col == 4) {
              divEle[3].className = 'fixed_model_num';
            }
          }
          else if (val[key].row == 2) {
            if (val[key].col == 1) {
              divEle[4].className = 'fixed_model_num';
            }
            else if (val[key].col == 2) {
              divEle[5].className = 'fixed_model_num';
            }
            else if (val[key].col == 3) {
              divEle[6].className = 'fixed_model_num';
            }
            else if (val[key].col == 4) {
              divEle[7].className = 'fixed_model_num';
            }
          }
          // divEle[key].className = 'fixed_model_num';
          // divEle.className = 'fixed_model_num';
          // document.querySelector('.back_number').appendChild(divEle);
        }

      }
    },
    currentTime() {
      let datetime = new Date();
      let hour = datetime.getHours();
      let minutes = datetime.getMinutes();
      hour = hour < 10 ? '0' + hour : hour;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      hour = `${hour}`.split('');
      hour.push('d_c');
      minutes = `${minutes}`.split('');
      hour = hour.concat(minutes);
      this.hour = hour;
    },
  },
  created() {
    // 加载好之前先渲染时间,否则会在更新时间后才显示时间,s5表示一次，减少内存消耗
    this.maxAcount();
    if (this.s5) {
      this.currentTime();
    }

  },
  mounted() {
    this.createNextModel();

    if (this.s5) {

      // 实时更新时间
      setInterval(() => {
        this.currentTime();
        document.querySelector('.nowTime').children[2].className = 'bg s_d';
      }, 1000);

      setInterval(() => {
        this.currentTime();
        document.querySelector('.nowTime').children[2].className = 'bg s_d_c';
      }, 2000);
    }

  },
  computed: {

    ...mapState(['data', 'rmRowSum', 'nextModel', 'music', 'stop']),
  },
  watch: {
    // 如果新长度大于旧长度,去掉一个背景0，进一位不会卡位
    data(newval, oldval) {
      if (newval.length !== oldval.length) {
        this.how.splice(0, 1);
      }
    },
    rmRowsum(newval, oldval) {
      if (newval.length !== oldval.length) {
        this.how.splice(0, 1);
      }
    },
    nextModel(newval, oldval) {
      if (this.s4) {
        // console.log(JSON.stringify(newval));
        this.createNextModel(newval);
      }
    },
    music(newval, oldval) {
      if (!this.music && this.s5) {
        document.querySelector('#music').className = 'bg music d';
      }
      if (this.music && this.s5) {
        document.querySelector('#music').className = 'bg music';
      }
    },
    stop(newval, oldval) {
      if (this.stop && this.s5) {
        // document.querySelector('#pause').className = 'bg pause d';
        this.t1 = setInterval(() => {
          document.querySelector('#pause').className = 'bg pause d';
        }, 200);
        this.t2 = setInterval(() => {
          document.querySelector('#pause').className = 'bg pause';
        }, 400);
      }
      if (!this.stop && this.s5) {
        clearInterval(this.t1, this.t2);
        document.querySelector('#pause').className = 'bg pause';
      }
    },
  }

};
</script>

<style lang="less" scoped >
@import './index.less';
</style>